<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>

</body>
<script>
	/**
	 * 组合中间件函数，生成一个串联执行中间件的函数
	 * @param {Array<Function>} middleware - 中间件函数数组，每个函数形式为 (next) => { ... }
	 * @returns {Function} 返回的执行函数，调用时会按顺序执行所有中间件
	 */
	function compose(middleware){
		// 返回的执行函数，调用时启动中间件链
		return function (){
			/**
			 * 递归调度中间件执行
			 * @param {number} i - 当前执行的中间件索引
			 */
			function dispatch(i){
				// 终止条件：所有中间件已执行完毕
				if (i === middleware.length) return
				
				// 获取当前中间件函数
				const fn = middleware[i]
				
				// 执行当前中间件，并传入封装好的next回调
				// next回调触发时会调度下一个中间件
				fn(() => {
					dispatch(i + 1)
				})
			}
			
			// 从第一个中间件开始执行
			dispatch(0)
		}
	}
	let middleware = []
	middleware.push((next) => {
		console.log(1)
		next()
		console.log(1.1)
	})
	middleware.push((next) => {
		console.log(2)
		next()
		console.log(2.1)
	})
	middleware.push((next) => {
		console.log(3)
		next()
		console.log(3.1)
	})
	
	let fn = compose(middleware)
	fn()
</script>
</html>